<template>
	<div>
		<div id="header">
			<div class="header_content">
				<div class="header_content_left">
					<image src="../../../static/header/logo.png" class="header_content_logo" />
					<a @click="showHome(0)"
						:class="[{'a_click':candanIndex == 0},{'header_content_a':candanIndex !=0}]">首页</a>
					<a @click="showCp(1)"
						:class="[{'a_click':candanIndex == 1},{'header_content_a':candanIndex !=1}]">产品</a>
					<a @click="showqd(2)"
						:class="[{'a_click':candanIndex == 2},{'header_content_a':candanIndex !=2}]">渠道</a>
					<a @click="showLT(3)"
						:class="[{'a_click':candanIndex == 3},{'header_content_a':candanIndex !=3}]">论坛</a>
					<!-- <a href="">手赚app</a> -->
					<!-- <a @click="showzx(4)"
						:class="[{'a_click':candanIndex == 4},{'header_content_a':candanIndex !=4}]">资讯</a> -->
					<a @click="showZX(5)"
						:class="[{'a_click':candanIndex == 5},{'header_content_a':candanIndex !=5}]">资讯</a>
					<a @click="addqd(6)"
						:class="[{'a_click':candanIndex == 6},{'header_content_a':candanIndex !=6}]">发布信息</a>
				</div>
				<div class="header_content_user" v-show="!isLogin">
					<a @click="login()" class="header_content_a">登录</a><span class="header_content_user_line">|</span><a
						@click="register()" class="header_content_a">注册</a>
				</div>
				<div class="header_content_user" v-show="isLogin">
					<text class="login_state" style="color: #F0AD4E;" @click="showUser()">{{userName}} </text>
					
					<text class="login_state" v-show="hasmsg()" style="color: #F0AD4E;font-size: 22px;" @click="showUser()">(消息{{msgSize}}) </text>
					
					<text class="login_state" style="color: #F0AD4E; margin-left: 15px;" @click="loginOut()">退出</text>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userName: "",
				candanIndex: 0,
				msgSize:0,
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.showUserInfo();
				this.getReviceSize();
			});

		},
		methods: {
			hasmsg(){
				if(this.msgSize>0){
					return true;
				}
				return false;
			},
			showHome(index) {
				this.candanIndex = index;
				uni.redirectTo({
					url: '../main/MainView'
				})
			},
			showCp(index) {
				this.candanIndex = index;
				uni.redirectTo({
					url: '../chanping/Chanping'
				})
			},
			showqd(index) {
				this.candanIndex = index;
				uni.redirectTo({
					url: '../qd/qudao'
				})
			},
			showLT(index) {
				this.candanIndex = index;
				uni.redirectTo({
					url: '../luntan/luntan'
				})
			},
			showzx(index) {
				this.candanIndex = index;
				uni.redirectTo({
					url: '../zixun/zixun'
				})
			},
			showZX(index) {
				this.candanIndex = index;
				uni.redirectTo({
					url: '../zixun/zixun'
				})
			},
			addqd(index){
				this.candanIndex = index;
				uni.redirectTo({
					url: '../qd/addQd'
				})
			},
			setIndex(index) {
				this.candanIndex = index;
			},
			login() {
				console.log("登录");
				uni.redirectTo({
					url: '../login/Login'
				})

			},
			register() {
				console.log("注册");
				uni.redirectTo({
					url: '../login/Login?register=1'
				})
			},
			showUserInfo() {

				if (this.$PublicData.getUserdata() == null || this.$PublicData.getUserdata().userName == null) {
					this.isLogin = false;
				} else {
					this.isLogin = true;
					this.userName = this.$PublicData.getUserdata().userName;
				}


			},
			loginOut() {
				this.$PublicData.saveUserdata(null);
				this.$Utils.showToast("退出成功");
				this.isLogin = false;
				uni.redirectTo({
					url: '../main/MainView',
				})
			},
			showUser() {
				console.log("showUsershowUser")
				uni.redirectTo({
					url: '../user/main',
				})
			},
			async getReviceSize() {
				try {
					const res = await this.$getData({
						url: this.$apis.getReviceHfTodySize,
						data: {
							userId: this.$PublicData.getUserdata().uid,
						}
					})
					this.msgSize = res.data.data;
			
				} catch (e) {
					console.log("eee: ", e);
				}
			},

		}

	}
</script>

<style>
	#header {
		position: fixed;
		top: 0;
		flex-direction: column;
		width: 100%;
		height: 4.375rem;
		background: #000000;
		justify-content: center;
		display: flex;
		align-items: center;
	}

	.header_content_logo {
		width: 170px;
		height: 45px;
		display: flex;
		align-self: center;
	}

	.header_content {
		width: 75rem;
		align-items: center;
		display: flex;
		height: 100%;

	}

	.header_content_left {
		display: flex;
		flex-grow: 20;

	}

	.header_content_a {
		background: #000000;
		text-align: center;
		display: block;
		height: 100%;
		line-height: 4.375rem;
		align-items: center;
		font-size: 1.125rem;
		font-weight: bold;
		color: white;
		text-decoration: none;
		align-content: center;
		align-self: center;
		flex-grow: 3;
	}

	.a_click {
		background: #666666;
		text-align: center;
		display: block;
		height: 100%;
		line-height: 4.375rem;
		align-items: center;
		font-size: 1.125rem;
		font-weight: bold;
		color: white;
		text-decoration: none;
		align-content: center;
		align-self: center;
		color: #FFFFFF;
		flex-grow: 3;
	}

	.header_content a:hover {
		background: #333333;
	}

	.header_content_user {
		margin-left: 6.25rem;
		justify-content: flex-end;
		align-items: center;
		display: flex;
		flex-grow: 1;

	}

	.header_content_user a {
		flex-grow: 1;
		display: block;
		font-size: 0.9375rem;
		margin-left: 5px;
		margin-right: 5px;
		width: 50px;

	}

	.header_content_user_line {
		color: white;
		margin-top: 0.3125rem;
		margin-bottom: 0.625rem;
		margin-left: 0.3125rem;
		margin-right: 0.3125rem;
	}
	.login_state :hover{
		padding: 5px;
		border-radius: 3px;
		background: #FF8C00;
		color: #FFFFFF;
		cursor: pointer;
	}
</style>
